import 'package:flutter/material.dart';
import 'package:demo/pages/models/card.dart' as MyCard;

class CardCard extends StatefulWidget {
  final MyCard.Card card;
  final void Function()? onTap;
  final Widget trailing;
  final Color cardColor; // 新增颜色属性

  CardCard({
    Key? key,
    required this.card,
    required this.onTap,
    required this.trailing,
    required this.cardColor,
  }) : super(key: key);

  @override
  _CardCardState createState() => _CardCardState();
}

class _CardCardState extends State<CardCard> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    // Set up the animation controller
    _animationController = AnimationController(
      duration: Duration(seconds: 1), // 调整动画持续时间
      vsync: this,
    );

    // Set up the animation
    _animation = Tween<double>(
      begin: 0,
      end: widget.card.value,
    ).animate(_animationController);

    // Start the animation
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    String maskedCardNo = '**** **** **** ${widget.card.cardNo.substring(widget.card.cardNo.length - 4)}';

    return Column(
      children: [
        GestureDetector(
          onTap: widget.onTap,
          child: Container(
            width: double.infinity,
            height: 180,
            decoration: BoxDecoration(
              color: widget.cardColor,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 5,
                  offset: Offset(0, 3),
                ),
              ],
            ),
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Icon(
                        Icons.format_bold,
                        size: 60,
                        color: Colors.orange,
                      ),
                      AnimatedBuilder(
                        animation: _animationController,
                        builder: (context, child) {
                          return Text(
                            _animation.value.toStringAsFixed(2),
                            style: TextStyle(
                              decoration: TextDecoration.none,
                              fontSize: 24,
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                          );
                        },
                      ),
                      SizedBox(height: 8),
                      Text(
                        "card No.",
                        style: TextStyle(
                            decoration: TextDecoration.none,
                            fontSize: 8,
                            color: Colors.grey,
                            fontWeight: FontWeight.bold),
                      ),
                      Text(
                        maskedCardNo,
                        style: TextStyle(
                          decoration: TextDecoration.none,
                          fontSize: 26,
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                  Spacer(),
                  Icon(
                    Icons.account_balance_wallet,
                    size: 24,
                    color: Colors.black54,
                  ),
                ],
              ),
            ),
          ),
        ),
        SizedBox(height: 15), // 添加一个SizedBox来调整两个Container之间的距离

      ],
    );
  }
}
